<template>
  <div>
    <el-card class="box-card">
      <!-- 头部区域 -->
      <template #header>
        <div class="header">
          <span>库存管理</span>
          <div class="extra">
            <el-button
              icon="el-icon-plus"
              type="primary"
              @click="adddrawer = true"
              >添加库存信息</el-button
            >
          </div>
        </div>
      </template>
      <!-- 搜索表单 -->
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="商品：">
          <el-select
            v-model="search.goodsId"
            placeholder="请选择商品"
            prop="goodsName"
          >
            <el-option
              v-for="g in goods"
              :key="g.goodsId"
              :label="g.goodsName"
              :value="g.goodsId"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="仓库：">
          <el-select
            v-model="search.storehouseId"
            placeholder="请选择仓库"
            prop="storehouseName"
          >
            <el-option
              v-for="s in storehouse"
              :key="s.storehouseId"
              :label="s.storehouseName"
              :value="s.storehouseId"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getInventory"
            >查询</el-button
          >
          <el-button icon="el-icon-refresh" type="primary" @click="SearchReset"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <!-- 商品管理列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="商品名" prop="goodsName" width="80px">
        </el-table-column>
        <el-table-column
          label="存放仓库"
          prop="storehouseName"
          width="80px"
        ></el-table-column>
        <el-table-column label="进价" prop="inPrice" width="80px">
        </el-table-column>
        <el-table-column label="售价" prop="outPrice" width="80px">
        </el-table-column>
        <el-table-column label="现存数量" prop="inNum" width="80px">
        </el-table-column>
        <el-table-column label="出库数量" prop="outNum" width="80px">
        </el-table-column>
        <el-table-column label="进库时间" prop="inTime"> </el-table-column>
        <el-table-column label="最新出库时间" prop="outTime">
          <template slot-scope="scope">{{
            scope.row.outTime ? scope.row.outTime : "---------------"
          }}</template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" width="100px">
        </el-table-column>
        <el-table-column label="负责人" prop="realName" width="100px">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              slot="reference"
              circle
              icon="el-icon-plus"
              size="small"
              type="warning"
              @click="ingoods(scope.row.inventoryId)"
            ></el-button>

            <el-button
              slot="reference"
              circle
              icon="el-icon-minus"
              size="small"
              type="success"
              @click="outgoods(scope.row.inventoryId)"
            ></el-button>

            <el-button
              slot="reference"
              circle
              icon="el-icon-edit"
              size="small"
              type="primary"
              @click="edit(scope.row)"
            ></el-button>

            <el-button
              slot="reference"
              circle
              icon="el-icon-delete"
              size="small"
              type="danger"
              @click="DelInventory(scope.row.inventoryId)"
            ></el-button>
          </template>
        </el-table-column>
        <template #empty>
          <el-empty description="没有数据" />
        </template>
      </el-table>

      <!-- 分页条 -->
      <div class="block">
        <el-pagination
          :current-page="this.pageNum"
          :page-size="this.pageSize"
          :page-sizes="[2, 3, 5, 10]"
          :total="this.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
       <!-- 修改抽屉 -->
       <el-drawer
        :direction="direction"
        :visible.sync="updatedrawer"
        title="库存信息修改"
      >
        <el-form :model="inventory" class="addform" label-width="100px">
          <!-- <el-form-item label="商品名:">
            <el-select
              v-model="inventory.goodsId"
              placeholder="请选择商品"
              prop="goodsName"
            >
              <el-option
                v-for="g in goods"
                :key="g.goodsId"
                :label="g.goodsName"
                :value="g.goodsId"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="仓库名:">
            <el-select
              v-model="inventory.storehouseId"
              placeholder="请选择仓库"
              prop="storehouseName"
            >
              <el-option
                v-for="s in storehouse"
                :key="s.storehouseId"
                :label="s.storehouseName"
                :value="s.storehouseId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="进价:">
            <el-input v-model="inventory.inPrice"></el-input>
          </el-form-item>
          <el-form-item label="售价:">
            <el-input v-model="inventory.outPrice" type="text"></el-input>
          </el-form-item>
          <el-form-item label="备注:">
            <el-input
              v-model="inventory.remark"
              style="width: 70%"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <template class="tem">
              <el-button
                style="margin-left: 50px"
                type="primary"
                @click="updateinventory"
                >提交</el-button
              >
              <el-button style="margin-left: 50px" @click="UpdatecleanInventory"
                >重置</el-button
              >
            </template>
          </el-form-item>
        </el-form>
      </el-drawer>

      <!-- 添加抽屉 -->
      <el-drawer
        :direction="direction"
        :visible.sync="adddrawer"
        title="商品库存信息添加"
      >
        <el-form :model="inventory" class="addform" label-width="100px">
          <el-form-item label="商品名:">
            <el-select
              v-model="inventory.goodsId"
              placeholder="请选择商品"
              prop="goodsName"
            >
              <el-option
                v-for="g in goods"
                :key="g.goodsId"
                :label="g.goodsName"
                :value="g.goodsId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="仓库名:">
            <el-select
              v-model="inventory.storehouseId"
              placeholder="请选择仓库"
              prop="storehouseName"
            >
              <el-option
                v-for="s in storehouse"
                :key="s.storehouseId"
                :label="s.storehouseName"
                :value="s.storehouseId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="进价:">
            <el-input v-model="inventory.inPrice"></el-input>
          </el-form-item>
          <el-form-item label="售价:">
            <el-input v-model="inventory.outPrice" type="text"></el-input>
          </el-form-item>
          <el-form-item label="存货数量:">
            <el-input v-model="inventory.inNum" type="text"></el-input>
          </el-form-item>
          <el-form-item label="备注:">
            <el-input
              v-model="inventory.remark"
              style="width: 70%"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <template class="tem">
              <el-button
                style="margin-left: 50px"
                type="primary"
                @click="addinventory"
                >提交</el-button
              >
              <el-button style="margin-left: 50px" @click="AddcleanInventory"
                >重置</el-button
              >
            </template>
          </el-form-item>
        </el-form>
      </el-drawer>

      <!-- 进货对话框 -->
      <el-dialog :visible.sync="indialog" title="添加存货数量" width="30%">
        <el-form :model="ingoods" label-width="80px">
          <el-form-item label="新增数量:">
            <el-input v-model="goodsNum.innum"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="indialog = false">取 消</el-button>
          <el-button type="primary" @click="addInNum()">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 出货对话框 -->
      <el-dialog :visible.sync="outdialog" title="出货" width="30%">
        <el-form :model="outgoods" label-width="80px">
          <el-form-item label="出货数量:">
            <el-input v-model="goodsNum.outnum"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="outdialog = false">取 消</el-button>
          <el-button type="primary" @click="addOutNum">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      // //从本地存储获取user数据
      user: localStorage.getItem("user")
        ? JSON.parse(localStorage.getItem("user"))
        : {},
      indialog: false,
      outdialog: false,
      goodsNum: {
        innum:"",
        outnum:"",
        inventoryId: "",
      },
      adddrawer: false,
      updatedrawer: false,
      direction: "rtl",
      tableData: [],
      pageNum: 1,
      pageSize: 3,
      total: 10,
      //库存数据模型
      inventory: {
        goodsId: "",
        storehouseId: "",
        userId: "",
        inNum: "",
        inPrice: "",
        outPrice: "",
        remark: "",
      },
      //出库记录数据模型
      outgoodslogs:{
       inventoryId:'',
       userId:'',
       outgoodsNum:''
      },
      //搜索模型
      search: {
        goodsId: "",
        storehouseId: "",
      },
      //商品数据模型
      goods: {
        goodsId: "",
        goodsName: "",
      },
      //仓库数据模型
      storehouse: {
        storehouseId: "",
        storehouseName: "",
      },
    };
  },
  methods: {
     //编辑方法
     edit(obj) {
 
      this.inventory = obj;
      this.updatedrawer = true

    },
    //清理数据模型
    AddcleanInventory(){
      this.inventory.goodsId='',
      this.inventory.storehouseId='',
      this.inventory.inNum='',
      this.inventory.inPrice='',
      this.inventory.outPrice='',
      this.inventory.remark=''
    },
     //清理数据模型
     UpdatecleanInventory(){
      this.inventory.storehouseId='',
      this.inventory.inPrice='',
      this.inventory.outPrice='',
      this.inventory.remark=''
    },

    //删除
    DelInventory(id) {
      this.$confirm('是否删除这个库存信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete("/inventory/DelInventory", {
          params: {
            Id: id
          }
        }).then(res => {
          if (res.data.code == '0') {
            this.$message.success("删除成功")
            this.getInventory()
          } else {
            this.$message.error(res.data.message)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //存货
    addInNum() {
      request
        .post("/inventory/AddInNum", {inNum:parseInt(this.goodsNum.innum),
          inventoryId:this.goodsNum.inventoryId
        })
        .then((res) => {
          if (res.data.code == "0") {
            this.$message.success("添加存货数量成功");
            this.getInventory();
            this.indialog = false;
          } else {
            this.$message.error("失败");
          }
        })
        .catch((error) => {
          console.log(new error("服务异常"));
          this.$message.error("服务异常");
        });
    },
    //出货
    addOutNum() {
      request
        .post("/inventory/out", {
          outNum: parseInt(this.goodsNum.outnum),
          inventoryId: this.goodsNum.inventoryId,
        })
        .then((res) => {
          if (res.data.code == "0") {
            this.$message.success("出货成功");
            this.outgoodslogs.outgoodsNum=this.goodsNum.outnum
            request.post("/inventory/outgoods",this.outgoodslogs).then(res=>{
              if(res.data.code!='0'){
                this.$message.error("错误")
              }
            })
            this.getInventory();
            this.outdialog = false;
          } else {
            this.$message.error(res.data.message);
          }
        });
    },
    //存货对话框
    ingoods(id) {
      this.goodsNum.inventoryId = id;
      this.indialog = true;
      console.log(this.inventoryId);
    },
    outgoods(id) {
      this.goodsNum.inventoryId = id;
      this.outgoodslogs.inventoryId = id;
      this.outgoodslogs.userId = this.user.data.userId;
      this.outdialog = true;
    },
    //修改
    updateinventory(){
     request.put("/inventory/UpdateInventory",this.inventory).then(res=>{
      if (res.data.code == "0") {
          this.$message.success("修改成功");
          this.getInventory();
          this.updatedrawer = false;
          this.AddcleanInventory()
        } else {
          this.$message.error("失败");
        }
     })
    },
    //添加
    addinventory() {
      request.post("/inventory/AddInventory", this.inventory).then((res) => {
        if (res.data.code == "0") {
          this.$message.success("添加成功");
          this.getInventory();
          this.adddrawer = false;
          this.AddcleanInventory()
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    //搜索条件操作
    SearchReset() {
      (this.search.goodsId = ""), (this.search.storehouseId = "");
    },
    //getInventory
    getInventory() {
      request
        .get("/inventory/SearchInventory", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            goodsId: this.search.goodsId,
            storehouseId: this.search.storehouseId,
          },
        })
        .then((res) => {
          if (res.data.code == "0") {
            this.tableData = res.data.data.list;
            this.total = res.data.data.total;
          } else {
            this.$message.error("查询失败");
          }
        });
    },
    //分页方法
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      console.log(pageSize);
      this.getInventory();
    },

    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.getInventory();
      console.log(pageNum);
    },
    //获取所有商品信息
    getGoods() {
      request.get("/goods/list").then((res) => {
        if (res.data.code == "0") {
          this.goods = res.data.data;
        } else {
          this.$message.error("查询失败");
        }
      });
    },
    //获取所有仓库信息
    getStore() {
      request.get("/storehouse/list").then((res) => {
        if (res.data.code == "0") {
          this.storehouse = res.data.data;
        } else {
          this.$message.error("查询失败");
        }
      });
    },
  },
  created() {
    this.inventory.userId = this.user.data.userId;
    this.getGoods();
    this.getStore();
    this.getInventory();
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.text {
  font-size: 20px;
}

.item {
  padding: 18px 0;
}

.addform {
  .el-input {
    // margin-left: 10px;
    width: 70%;
  }
}
</style>